<template>
  <!--  监测项目管理-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>


<!--          <el-row :gutter="20">-->

<!--            <el-col :span="6">-->
<!--              <div style="text-align: center">-->
<!--                <div class="statistic_title">数据总量</div>-->
<!--                &lt;!&ndash;          数据统计&ndash;&gt;-->
<!--                <number-scroll :number="mainCount[0].value"></number-scroll>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="6">-->
<!--              <div style="text-align: center">-->
<!--                <div class="statistic_title">项目总量</div>-->
<!--                &lt;!&ndash;          数据统计&ndash;&gt;-->
<!--                <number-scroll :number="form.total"></number-scroll>-->
<!--              </div>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->

<!--              <div style="text-align: center">-->
<!--                <div class="statistic_title" style="margin-bottom: 0px">监测类型占比数量</div>-->
<!--              </div>-->
<!--              <div class="statistic_div">-->
<!--                <div style="text-align: center;display: inline-block;width: 90px" v-for="item in typeCount"-->
<!--                     v-bind:key="item.name">-->
<!--                  &lt;!&ndash;          数据统计&ndash;&gt;-->
<!--                  <number-scroll-mini :number="item.value"></number-scroll-mini>-->
<!--                  <div class="statistic_lable">{{item.name}}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </el-col>-->
<!--          </el-row>-->

          <el-divider></el-divider>

          <div class="s-table">
            <!-- 条件筛选 -->
            <div class="page_filter">
              <el-input v-model="form.name" clearable placeholder="请输入项目名称">
                <template slot="prepend">项目名称</template>
              </el-input>
<!--              <region-unit v-model="form.areaId" placeholder="项目行政区"></region-unit>-->
<!--              <el-select v-model="form.stage" clearable placeholder="请选择工程阶段">-->
<!--                <el-option v-for="item in EnumProjectStageList" :key="item.code" :label="item.name" :value="item.code">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--              <el-select v-model="form.industry" clearable placeholder="请选择所属行业">-->
<!--                <el-option v-for="item in EnumProjectTradeList" :key="item.code" :label="item.name" :value="item.code">-->
<!--                </el-option>-->
<!--              </el-select>-->
              <el-button class="common_btn-defalut" icon="el-icon-search" @click="searchData">搜索</el-button>
            </div>
            <div v-if="select.organizeName" class="detail-header">
              {{select.organizeName}}{{select.routeName}}{{select.roadSectionName}}
            </div>

            <div class="page_main">
              <el-button :disabled="hasPermission('project:project:add')?false:'disabled'" icon="el-icon-plus"
                         @click.stop="handleAdd"
                         class="common_btn-small">新增监测项目
              </el-button>
              <!-- table -->

              <el-row :gutter="20" v-if="tableList.length > 0">
                <el-col :xs="24" :sm="12" :md="6" :lg="8" :xl="8" v-for="project in tableList"
                        v-bind:key="project.id">
                  <el-card class="box-card" shadow="always" style="box-shadow: 0 2px 6px 0 rgb(0 0 0 / 30%);">
                    <p class="title">{{project.name?project.name:'---'}}</p>

                    <el-row>
                      <el-col :span="8">
                        <el-image class="base_img-item" @click="previewImg(0,project.projectInfoImgList)"
                                  :src="constUrl+project.projectInfoImgList[0]" fit="cover">
                          <div slot="error" class="image-slot">
                            <img src="./components/imgs/nopic.png" />
                          </div>
                        </el-image>
                      </el-col>

                      <el-col :span="16">
                        <p>位置信息：<span>{{project.area?project.area:'---'}}</span></p>
                        <p>所属行业：<span>{{project.industryName?project.industryName:'---'}}</span></p>
                        <p>工程阶段：<span>{{project.stageName?project.stageName:'---'}}</span></p>
                        <el-divider></el-divider>
                        <div class="bottom_button">
                          <el-row :gutter="10">
                            <el-col :span="6">
                              <el-button class="btn_edit_cs" type="text" icon="el-icon-s-operation"
                                         :disabled="hasPermission('project:project:update')?false:'disabled'"
                                         @click="handleEdit(project)">编辑
                              </el-button>
                            </el-col>
                            <el-col :span="12">
                              <el-button class="btn_add" type="text" icon="iconkaohepingjia iconfont"
                                         @click="toProjectDetail(project)">监测数据
                              </el-button>
                            </el-col>
                            <el-col :span="6">
                              <el-button class="btn_edit" type="text" icon="el-icon-paperclip"
                                         v-if="hasPermission('project:push:rule')"
                                         @click="handleRelation(project)">关联
                              </el-button>
                            </el-col>

                          </el-row>

                        </div>
                      </el-col>
                    </el-row>
                    <!--                    <div class="info-btn">-->
                    <!--                      <el-tag style="cursor: pointer;margin-left: 5px;margin-top: 5px"-->
                    <!--                              @click="toControl(item,project.id,project)"-->
                    <!--                              v-for="item in project.monitorPointList" v-bind:key="item.id" size="mini">-->
                    <!--                        {{item.monitorTypeName}}-->
                    <!--                      </el-tag>-->
                    <!--                    </div>-->


                  </el-card>
                </el-col>
              </el-row>
              <div v-else style="text-align: center;color: #909399">
                没有监测项目
              </div>
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                             :current-page="form.page"
                             :page-size="form.pageSize" :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                             layout="sizes, prev, pager, next" :total="form.total">
              </el-pagination>
            </div>
            <!-- 新增编辑弹窗 -->
            <el-dialog :title="dialogTitle" :visible.sync="isShowDialog" :close-on-click-modal="false"
                       :close-on-press-escape="false" width="720px">
              <!-- 具体form表单 -->
              <el-form label-position="right" ref="form" :rules="rules" :model="currentRow" label-width="100px">

                <el-form-item label="工程名称" prop="name">
                  <el-input v-model="currentRow.name" clearable placeholder="请输入工程名称"></el-input>
                </el-form-item>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="监测单位" prop="implTreeId">
                      <organization @change="queryRoadTree" v-model="currentRow.implTreeId"
                                    placeholder="请选择监测单位"></organization>
                    </el-form-item>
                    <el-form-item label="管养单位" prop="ownerUnit">
                      <organization-unit @change="queryRoadTree" v-model="currentRow.deptTreeId"
                                         placeholder="请选择管养单位" ref="organizationUnit"></organization-unit>
                    </el-form-item>
                    <el-form-item label="所属行业" prop="industry">
                      <el-select v-model="currentRow.industry" clearable placeholder="请选择所属行业">
                        <el-option v-for="item in EnumProjectTradeList" :key="item.code" :label="item.name"
                                   :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="起始时间" prop="startTime">
                      <el-date-picker
                        v-model="currentRow.startTime"
                        type="datetime"
                        value-format="timestamp"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="所属行政区" prop="areaId">
                      <region-unit v-model="currentRow.areaId" :key="currentRow.areaId"></region-unit>
                    </el-form-item>
                    <el-form-item label="路线" prop="road">
                      <el-autocomplete
                        v-model="state"
                        clearable
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入路线名称或编号"
                        @change="handleChange"
                        @select="handleSelect"
                      ></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="工程阶段" prop="stage">
                      <el-select v-model="currentRow.stage" clearable placeholder="请选择工程阶段">
                        <el-option v-for="item in EnumProjectStageList" :key="item.code" :label="item.name"
                                   :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime">
                      <el-date-picker
                        v-model="currentRow.endTime"
                        type="datetime"
                        value-format="timestamp"
                        placeholder="选择日期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="具体位置" prop="position">
                  <el-input v-model="currentRow.position" clearable placeholder="请输入位置信息"></el-input>
                </el-form-item>
                <el-form-item label="立项批文" prop="projectApprovalList">
                  <upload-file v-model="currentRow.projectApprovalList" ref="uploadClear"></upload-file>
                </el-form-item>
                <el-form-item label="工程图片" prop="projectInfoImgList">
                  <upload-img v-model="currentRow.projectInfoImgList" :limit="9" :size-limit="4"
                              ref="uploadPic"></upload-img>
                </el-form-item>
                <el-form-item label="项目概况" prop="survey">
                  <el-input type="textarea" v-model="currentRow.survey" clearable placeholder="请输入项目概况"></el-input>
                </el-form-item>
              </el-form>
              <!-- 操作按钮 -->
              <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
            </el-dialog>

            <!--推送表单新增编辑弹窗 -->
            <el-dialog title="绑定" :visible.sync="isShowDialogRelation" :close-on-click-modal="false" width="220px">
              <!-- 具体表单 -->
              <div style="max-height: 60vh;overflow: auto;width: 100%">
                <el-form label-position="right" ref="formRelation" :model="currentRowRelation" label-width="120px"
                         class="form_width-200">
                  <el-form-item label="绑定规则：" prop="ruleId">
                    <el-select multiple v-model="currentRowRelation.ruleId" placeholder="请选择规则"
                               @change="$forceUpdate() " clearable
                               @focus="$forceUpdate()">
                      <el-option
                        v-for="item in pushSelectList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>

              </div>
              <!-- 操作按钮 -->
              <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialogRelation = false">取消</el-button>
                <el-button class="common_btn-defalut" type="primary" @click="addRelation">确定</el-button>
      </span>
            </el-dialog>
          </div>
          <x-loading v-show="isLoading"></x-loading>
          <picture-viewer ref="imageViewer"></picture-viewer>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import OrganizationTree from '@/components/organization-tree/all'
  import UploadImg from '@/components/upload-img'
  import UploadFile from '@/components/upload-file'
  import RegionUnit from '@/components/region-unit'
  import OrganizationUnit from '@/components/organization-unit/all3'
  import Organization from '@/components/organization-unit/all3'
  import {
    listMonitorTypeCount,
    projectInfoAdd,
    projectInfoDelete,
    projectInfoQuery,
    projectInfoUpdate,
  } from '@/services/model/project-info'
  import {getRoadSelectList} from '@/services/model/road-mgmt'
  import {getPushSelectQuery, getRelation} from '@/services/model/push'
  import Enums from '@/utils/enums'
  import Permission from '@/utils/permission'
  import {actions} from './work-point.store'
  import XLoading from '@/components/animation/x-loading.vue'
  import constUrl from '@/services/env'
  import PictureViewer from '@/components/picture-viewer'
  // import NumberScroll from './components/number-scroll'
  // import NumberScrollMini from './components/number-scroll-mini'

  const Echarts = require('echarts')
  // form表单校验规则
  const RULES = {
    name: [{
      required: true,
      message: '请填写工程名称',
    }, {max: 35, message: "最多只能输入35个字符", trigger: "blur"}],
    implTreeId: {
      required: true,
      message: '请选择监测单位',
    },
  }
  export default {
    components: {
      // NumberScroll,
      // NumberScrollMini,
      UploadImg,
      UploadFile,
      RegionUnit,
      OrganizationUnit,
      OrganizationTree,
      Organization,
      XLoading,
      PictureViewer
      // EchartsNestingChange
    },
    data() {
      return {
        mainCount: [{}],
        typeCount: [{}],
        constUrl,
        pushSelectList: [],
        isShowDialogRelation: false,
        state: '',
        restaurants: [],
        // chartsName: ['echartsOneChange', 'echartsTwoChange'],
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        roadResult: '',
        //路线路段树形列表
        roadOptions: [],
        userInfo: '',
        // 接口正在加载
        isLoading: false,
        statistics: {
          projectIds: ''
        },
        select: {
          organizeName: '',
          routeName: '',
          roadSectionName: '',
        },
        form: {
          page: 1,
          pageSize: 9,
          total: 0,
        },
        form1: {
          checkResult: 1, // 已审核
          platformTypeList: '1,2' // 政府综合、行业部门
        },

        rules: RULES, // 表单校验的规则
        tableList: [],

        isShowDialog: false, // 是否显示弹窗
        currentRowRelation: {ruleId: []},
        currentRow: {}, // 新增数据
        EnumProjectTradeList: [],
        EnumProjectStageList: [],
        EnumRoadNodeTypeList: [],
        modelOptions: [],
        myPieCharts: '',
        orgData: [],
        defaultProps: {
          children: 'children',
          label: 'userName',
          isLeaf: true
        },
        defaultRoadProps: {
          children: 'subList',
          label: 'name'
        },
        roadTree: [],
      }
    },
    mixins: [Enums],
    computed: {
      //级联选择器返回值配置
      selectedOptions: {
        get(val) {
          if (val.$attrs.value) {
            return val.$attrs.value
          } else {
            return []
          }
        },
        set(val) {
          this.newOptions = val[val.length - 1]
          this.$emit('input', this.newOptions)
        }
      },
      // 弹窗的title
      dialogTitle() {
        return this.currentRow.id ? '编辑项目信息' : '新增项目信息'
      },
      firstData() {
        return this.$store.state.userInfo
      },
    },
    watch: {
      firstData(val) {
        this.userInfo = val
      },
    },
    methods: {
      async addRelation() {
        let res = await getRelation({
          projectId: this.currentRowRelation.projectId,
          ruleId: this.currentRowRelation.ruleId.join(',')
        })
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '添加成功！'
          })
          this.isShowDialogRelation = false
          this.queryList()
        }
      },
      handleSelect(item) {
        this.currentRow.roadId = item.id
        // this.changeRoad()
      },

      handleChange(item) {
        if (item == '') {
          this.currentRow.roadId = ''
        }
      },
      // 模糊搜索路线
      querySearchAsync(queryString, cb) {
        var restaurants
        if (!queryString) {
          restaurants = [];
        } else {
          restaurants = this.restaurants;

        }
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 10 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
        };
      },
      // 查看大图
      previewImg(index, urls) {
        this.$refs.imageViewer.showViewer(urls.map(x => this.constUrl + x), index)
      },
      async toControl(val, projectId, row) {
        let type = [1, 2, 3, 8]
        if (type.indexOf(val.monitorType) === -1) {
          return
        }
        const {id} = row
        await actions.queryProjectInfo(id)
        await actions.queryWorkPointList(id, 3, val.monitorType)
        this.$router.push({
          path: `project/${projectId}/probablyEchart`,
          query: {monitorType: val.monitorType}
        })
      },
      // 判断权限
      hasPermission(permissionStr) {
        return Permission(this.$store.state.userInfo, permissionStr)
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.form.page = 1
        this.queryList()
      },
      // 去具体的项目应用
      async toProjectDetail(row) {
        const {id} = row
        const {area} = row
        let name = ''
        if (area) {
          for (let i = 0; i < area.length; i++) {
            const char = area[i];
            // 在这里添加你的条件判断，筛选出符合需要的字符
            if (char == "省" || char == "市") {
              break;
            }
            name += char;
          }
          for (let i = 0; i < area.length; i++) {
            const char = area[i];
            // 在这里添加你的条件判断，筛选出符合需要的字符
            if (name.indexOf("省") === -1) {
              name = ""; // 如果字符串中不存在"省"，将name置为空字符串
            }

          }
        }
        await actions.queryProjectInfo(id)
        let url = await actions.queryWorkPointList(id)
        url = url + "?" + 'cityName=' + name
        console.log(url)
        this.$router.push(url)
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      // 表单提交
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitData()
          }
        })
      },
      // 新增编辑提交数据
      async submitData() {
        // 根据ID判断使用新增还是编辑
        let action = this.currentRow.id ? projectInfoUpdate : projectInfoAdd
        let arr = this.roadResult.split("-")
        this.currentRow.roadSectionId = arr[arr.length - 1]
        let res = await action(this.currentRow)
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: this.currentRow.id ? '修改成功' : '添加成功'
          })
          this.isShowDialog = false
          this.queryList()
          return true
        }
      },
      // 处理删除
      async handleDelete(row) {
        let res = await projectInfoDelete({
          id: row.id
        })
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '数据已删除'
          })
          this.queryList()
        }
      },
      // 新增数据
      handleAdd() {
        this.currentRow = {}
        this.$forceUpdate()
        this.isShowDialog = true
        this.$nextTick(() => {
          this.$refs.organizationUnit.getOrganizationTreeTwo()
          this.$refs.uploadClear.clears()
          this.$refs.uploadPic.clears()
          this.$refs.form.clearValidate()
        })
      },
      /**
       * row  当前操作行的对象
       */
      handleEdit(row) {
        this.isShowDialog = true
        this.currentRow = JSON.parse(JSON.stringify(row))
        this.queryRoadTree()
        this.$nextTick(() => {
          this.$refs.organizationUnit.getOrganizationTreeTwo()
          this.$refs.form.clearValidate()
        })
      },
      //绑定
      handleRelation(row) {
        this.queryPushSelect()
        this.isShowDialogRelation = true
        let data = JSON.parse(JSON.stringify(row))
        this.currentRowRelation.ruleId = data.ruleId ? data.ruleId.split(',') : []
        this.currentRowRelation.projectId = data.id
        this.$nextTick(() => {
          this.$refs.formRelation.clearValidate()
        })
      },
      async queryList() {
        this.isLoading = true
        let res = await projectInfoQuery(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)
        this.isLoading = false
        // this.statisticsCount()

      },
      // echart随着窗口改变
      echartResize() {
        if (this.myPieCharts) {
          this.myPieCharts.resize()
        }
      },
      // 监测类型占比统计
      async listMonitorType() {
        let res = await listMonitorTypeCount(this.form)
        let data = res.data
        this.mainCount = data.mainCount
        this.typeCount = data.typeCount
        this.isLoading = false
      },

      searchData() {
        this.form.page = 1
        this.queryList()
      },
      statisticsCount() {
        // 监测类型占比统计
        this.listMonitorType()
      },
      //获取推送规则下拉
      async queryPushSelect() {
        const {data} = await getPushSelectQuery()
        this.pushSelectList = data
      },
      //获取组织下的路线列表
      async queryRoadTree() {
        const {data} = await getRoadSelectList({deptId: this.currentRow.deptTreeId})
        localStorage.setItem("deptTreeId", this.currentRow.deptTreeId)
        let dataS = []
        data.map(x => {
          dataS.push({
            id: x.id,
            value: x.name,
            name: x.name
          })
        })
        this.restaurants = dataS
      },

    },
    created() {

    },
    mounted() {
      this.userInfo = this.firstData
      this.form.loginId = this.userInfo.id
      this.queryDictList(['EnumProjectTrade', 'EnumProjectStage', 'EnumRoadNodeType'], ['EnumProjectTradeList', 'EnumProjectStageList', 'EnumRoadNodeTypeList'])
      window.addEventListener('resize', this.echartResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.echartResize)
    },
  }
</script>
<style lang="less" scoped>

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100% !important;
  }

  .el-card {
    color: #228af5;
  }

  .page {
    .page_main {
      height: calc(75vh - 7px);
      overflow: hidden;
    }

    .s-left {
      background-color: #FFFFFF;
      padding: 5px;
      border-radius: 5px;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 280px;
      overflow-x: auto;
      border: 1px solid #DCDFE6;

      h3 {
        padding: 5px;
        font-size: 20px;
        border: 1px solid #DCDFE6;
        background-color: #1990FE;
        border-radius: 5px;
        color: white;
      }
    }

    .s-hide {
      display: none;
    }

    .s-leftPos {
      left: 0px;

    }

    .s-pie:before, .s-pie:after {
      content: '';
      display: block;
    }

    .s-pie:after {
      clear: both;
    }

    .s-pie {
      border-radius: 5px;
      height: 250px;
      border: 1px solid #DCDFE6;
      background-color: #FFFFFF;
      margin-bottom: 10px;

      .pie-charts {
        height: 220px;
      }

      .s-works {
        padding: 10px;
        float: left;
        width: 33%;
      }
    }

    .s-right {
      position: absolute;
      right: 0px;
      left: 285px;
      top: 0px;

      .s-table {
        border: 1px solid #DCDFE6;
        background-color: #FFFFFF;
        border-radius: 5px;
      }

    }

    .bread_button_text {
      padding-right: 0px;
      font-size: 18px;
      font-weight: 600;
      color: #1990FE;
    }
  }

  .box-card {
    display: inline-block;
    width: 100%;
    height: 170px;
    margin-bottom: 10px;
    border-radius: 0.25rem;
    border: 1px solid #266BFF;

    .el-divider--horizontal {
      margin: 1px;
    }

    p {
      font-size: 15px;
      padding: 5px;
      font-weight: 600;
      margin-left: 10px;
      color: #1a253a;
    }

    span {
      font-size: 12px;
      padding: 5px;
      font-weight: 600;
      color: #1990FE;
    }

    .btn-close {
      float: right;
      cursor: pointer;
    }


    .level_view {
      display: inline-block;
      padding: 0px 3px;
      border-radius: 3px;
    }

    .title {
      font-size: 16px;
      white-space: nowrap;
      clear: both;
      margin-bottom: 7px;
      border-bottom: 1px solid #0e1014;
      padding: 9px;
      color: #1b1b1b;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .el-button--success {
      color: #FFF;
      background-color: #1990FE;
      border-color: #1990FE;
    }

    .info-btn {
      height: 50px;
      margin-top: 5px;
      margin-bottom: 5px;

      .btn-item {
        margin-bottom: 7px;
        margin-right: 7px;
        background-color: #1990FE;
      }

      /deep/ .el-button + .el-button {
        margin-left: 0px;
      }
    }

    ul li {
      font-size: 12px;
      line-height: 20px;

      span:first-child {
        font-weight: bold;
      }
    }
  }

  .project_info {
    height: 100%;
    overflow: auto;
    padding: 10px;
    color: #8c939d;
    text-indent: 20px;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #8c939d;
    border-radius: 10px;
  }

  .el-tag--dark {
    width: 120px;
    text-align: center;
    border: none;
    margin: 2px;
    font-size: 12px;
  }

  .statistic_title {
    color: #1b1b1b;
    font-size: 25px;
    margin-bottom: 35px;
  }

  .statistic_div {
    text-align: center;
    overflow-x: scroll;
    overflow-y: hidden;
    /*white-space: nowrap;*/
  }

  /*设置小的滚动条样式*/
  .statistic_div::-webkit-scrollbar {
    height: 4px;
  }

  .statistic_div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #1990FE;
  }

  .statistic_div::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }

  .base_img-item {
    height: 108px;
    width: 162px;
  }

  .bottom_button {
    position: absolute;
    bottom: 5px;
    width: 66%;

    .el-col-12 {
      border-right: 1px solid grey;
      border-left: 1px solid grey;
    }
  }

  .bottom_button .el-col {
    text-align: center;
  }

</style>
